<!-- index.html -->
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
    <title>MQTT Broker 管理后台</title>
    <!-- index.html -->
    <link rel="stylesheet" href="css/base.css">
    <link rel="stylesheet" href="css/layout.css">
    <link rel="stylesheet" href="css/dashboard.css">
    <link rel="stylesheet" href="css/clients.css">
</head>
<body class="light-mode">
<!-- 头部导航 -->
<header class="topbar">
    <div class="logo">MQTT 管理后台</div>

    <nav class="navigation">
        <a href="#/dashboard" class="nav-link">仪表盘</a>
        <a href="#/clients" class="nav-link">客户端</a>
    </nav>

    <div class="actions">
        <button id="user-menu-btn" class="icon-button">👤</button>
        <button id="logout-btn" class="icon-button">🚪</button>
    </div>
</header>

<!-- 主体内容 -->
<main class="main-content">
    <div id="app"></div>
</main>

<!-- JS 模块 -->
<script type="module" src="/js/main.js"></script>
<script type="module">
    import { logout } from "./js/auth.js";
    // 登出逻辑
    document.getElementById('logout-btn').addEventListener('click', (e) => {
        e.preventDefault();
        logout();
    });
</script>
</body>
</html>
